<template>
	<div class="mobile_home">
		<div class="banner">
			<el-carousel :interval="5000" arrow="always" height="10rem">
				<el-carousel-item v-for="item in hotlist" :key="item.id">
					<router-link :to="`/moblie/bookdetail/${item.id}`">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
					</router-link>
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- 传递的数据如果是固定的字符串，那么不需要v-bind指令 -->
		<MobileHomeList proptitle="热门推荐" :proplist='hotlist'></MobileHomeList>
		<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue';
	export default {
		name: 'MobileHome',
		components: {
			MobileHomeList,
		},
		data() {
			return {
				hotlist: [],
				newslist: [],
				bannerlist: [],
			}
		},
		methods: {
			getHotBook() {
				this.$axios.get("http://127.0.0.1/api/public/book/findTopSale/6").then((resp) => {
					resp.data.data.forEach((item) => {
						this.hotlist.push(item);
						console.log(this.hotlist);
					})
					
					console.log(this.hotlist)
				})
			},
			getNewBook() {
				console.log('1');
				this.$axios.get("http://127.0.0.1/api/public/book/findTopSale/6").then((resp) => {
					resp.data.data.forEach((item) => {
						this.newslist.push(item);
					})
					console.log(this.hotlist)
				})
			},
		},
		mounted() {
			this.getHotBook();
			this.getNewBook();
		},
	}
</script>

<style scoped>
	.mobile_home {
		background-color: #f5d5a0;
		position: relative;
		top: 56px;
	}
	.mobile_home .banner {
		width: 100%;
		height: 100%;
		background-color: orange;
	}
	
	.mobile_home .banner img {
		width: 100%;
		height: 100%;
	}
	
	/* 穿刺：CSS用于修改固定组件样式的操作 */
	.mobile_home .banner .el-carousel /deep/ .el-carousel__button {
		height: 5px !important;
	}
	
	.mobile_home .banner .el-carousel /deep/ .is-active .el-carousel__button {
		background-color: #a68b5b !important;
	}
</style>
